<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="static/css/authenticationCode.css">
    <link rel="stylesheet" href="static/css/base.css">


</head>

<body style=" background-color: #bfc7c1;">
    <div id="all">
        <div id='accountManagement' class="accountManagement"
            :class="istrue?'open accountManagement':'close accountManagement'">

            <div class="top">
                <div class="top_a">
                    <div class="top_a1">
                        <input type="text" placeholder="账号/姓名" v-model="keyWord">
                        <img src="static/images/path.png" alt="">
                    </div>
                </div>
                <div class="top_b">
                    <div class="top_b1" @click="Refresh"> <img src="static/images/icon_refresh.png" alt=""> Refresh
                    </div>
                    <div class="top_b2" @click="istrue=!istrue">新增账号</div>
                </div>
            </div>
            <div class="middle">
                <div class="box">


                    <table cellspacing="0" cellpadding="0">

                        <thead class="box-top">
                            <tr>
                                <th class="a accountNumber">邮箱账号</th>
                                <th class="a department   ">部门</th>
                                <th class="a position      ">职位</th>
                                <th class="a _name        ">姓名</th>
                                <th class="a operation     ">操作</th>

                            </tr>
                        </thead>
                        <tbody class="box-content">

                            <tr v-for="(p,index) of filusersInfo" :key="index">
                                <td class="c b accountNumber">{{p.email}}</td>
                                <td class="c b department">{{p.department}}</td>
                                <td class="c b position">{{p.Position}}</td>
                                <td class="c b _name">{{p.realName}}</td>
                                <td class="c b operation">
                                    <div class="operation_a" @click="open($event,p)">重置密码</div>
                                    <!-- del($event,p._openid) 用于传输数据 -->
                                    <div @click="del($event,p)" class="operation_b">注销</div>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                </div>





            </div>


        </div>
        <div class="NewAccount" :class="istrue?'close NewAccount':'open NewAccount'">
            <div class="NewAccount_top">
                <div class="NewAccount_top_a" @click="istrue=!istrue"><img src="static/images/切换器左.png" alt="">返回
                </div>
            </div>
            <div class="NewAccount_middle">
                <div class="NewAccount_middle_a">
                    <div class="NewAccount_middle_a1">新增管理员账号</div>
                    <div class="NewAccount_middle_a2 NewAccount_middle_a2_1"><img src="static/images/画板 1.png" alt="">
                        <input type="text" placeholder="自定义邮箱账号" v-model="email" @blur="inputEmail">
                    </div>
                    <div class="NewAccount_middle_a2 NewAccount_middle_a2_2"><img src="static/images/画板 1.png" alt="">
                        <input type="password" placeholder="请输入密码" v-model="newPassword" @blur="write">
                    </div>
                    <div class="NewAccount_middle_a2 NewAccount_middle_a2_3"><img src="static/images/画板 1.png" alt="">
                        <input type="password" placeholder="确定密码" v-model="confirmPassword" @blur="write">
                    </div>
                    <div class="NewAccount_middle_a2 NewAccount_middle_a2_4"><img src="static/images/画板 1.png" alt="">
                        <input type="text" placeholder="请输入用于找回密码的邮箱" v-model="Email" @blur=" inputEmail">
                    </div>
                    <div class="NewAccount_middle_a3" @click="empty">清空所有输入</div>
                    <div class="NewAccount_middle_a4" @click="save">确定</div>
                </div>
            </div>
            <div class="NewAccount_bottom">
                <img src="static/images/kitekat-19 1.png" alt="">
            </div>
        </div>
    </div>
    <script>
        console.log("这是xxx");
        // 利用排他思想做tab切换页面
        // var accountManagement = document.querySelector('.accountManagement');
        // var top_b2 = accountManagement.querySelector('.top_b2');
        // var NewAccount = document.querySelector('.NewAccount');
        // var NewAccount_top_a = NewAccount.querySelector('.NewAccount_top_a');
        // top_b2.onclick = function () {
        //     accountManagement.style.display = 'none';
        //     NewAccount.style.display = 'block';
        // }
        // NewAccount_top_a.onclick = function () {
        //     accountManagement.style.display = 'block';
        //     NewAccount.style.display = 'none';
        // }
        const c = window.cloud
        Vue.prototype.cloud = c
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        Vue.config.devtools = true;
        const vm = new Vue({
            el: '#all',
            data() {

                return {

                    //inputMessage输入信息
                    usersInfo: [], //用户对象.
                    password: '',//输入的密码
                    confirmPassword: '',//确认密码
                    openid: "",//保存的临时
                    realName: "",
                    department: "网络研发部",
                    Postion: '',
                    istrue: true,
                    isReset: true,
                    keyWord: '',
                    Account: '',
                    newPassword: '',
                    confirmPassword: '',
                    email: '',
                    timestamp: '',
                    Email: '',
                    filusersInfo: ''

                }
            },
            methods: {

                //配置微信
                async initWx() {
                    //创建新的cloud实例
                    var c1 = new this.cloud.Cloud({
                        identityless: true,
                        // 资源方 AppID 填自己的
                        resourceAppid: 'wx96f760966921f98a',
                        // 资源方环境 ID	填自己的
                        resourceEnv: 'cloud1-8g54d6xb74e96e7d'
                    })
                    //初始化,使用await将异步转化为同步
                    await c1.init()
                    console.log('初始化完成');
                    this.cloud = c1
                    this.db = this.cloud.database()
                },
                async getMessage() {

                    this.db.collection("operationUsers").get().then(res => {
                        console.log(res);
                        // 我要的数据是res.data
                        this.usersInfo = res.data;
                        this.filusersInfo = this.usersInfo;
                    }
                    )

                    //资费有限
                    // const MAX_LIMIT = 20

                    // 先取出集合记录总数

                    // this.db.collection('operationUsers').count().then(async res => {
                    //     console.log(res);
                    //     const total = res.total
                    //     const batchTimes = Math.ceil(total / 20)
                    //     var oldData = []
                    //这里思路是正确的
                    // for (let i = 0; i < batchTimes; i++) {
                    //     await this.db.collection('operationUsers').skip(i * MAX_LIMIT).limit(MAX_LIMIT).get().then(res => {
                    //         console.log(res);
                    // 我要的数据是res.data

                    //             oldData = res.data
                    //         }
                    //         )
                    //         this.usersInfo = this.usersInfo.concat(oldData);
                    //         this.filusersInfo = this.usersInfo;

                    //     }
                    //     console.log("所有的数据");
                    //     console.log(this.filusersInfo);
                    // }).catch(error => {
                    //     console.log(error);
                    // })




                }
                ,
                del(e, p) {
                    console.log(e);
                    const h = this.$createElement;
                    this.$msgbox({
                        title: '提示',
                        message: h('p', null, [
                            h('span', null, '此操作将永久注销此账号, 是否继续? '),

                        ]),
                        showCancelButton: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        beforeClose: (action, instance, done) => {
                            if (action === 'confirm') {
                                instance.confirmButtonLoading = true;
                                instance.confirmButtonText = '执行中...';
                                this.db.collection('operationUsers').where({ email: p.email }).remove({
                                    success: res => {
                                        console.log(res);
                                        if (res.stats.removed) {
                                            setTimeout(() => {
                                                done();
                                                setTimeout(() => {
                                                    instance.confirmButtonLoading = false;
                                                }, 300);
                                            }, 3000);
                                        }
                                    },
                                    fail: res => {

                                        console.log(res);

                                    }
                                })
                                // setTimeout(() => {
                                //     done();
                                //     setTimeout(() => {
                                //         instance.confirmButtonLoading = false;
                                //     }, 300);
                                // }, 3000);


                            } else {
                                done();
                            }
                        }

                    }).then(action => {
                        try {
                            this.$message({
                                type: 'success',
                                message: '注销成功'
                            });
                            this.db.collection("operationUsers").get().then(res => {
                                console.log(res);
                                // 我要的数据是res.data
                                this.usersInfo = res.data;
                                this.filusersInfo = this.usersInfo;
                            }
                            )
                        } catch (error) {
                            console.log(error);
                        }

                    });
                }
                ,
                Refresh() {
                    this.getMessage();
                    this.db.collection("operationUsers").get().then(res => {
                        console.log(res);
                        // 我要的数据是res.data
                        this.usersInfo = res.data;
                        this.filusersInfo = this.usersInfo;
                    }
                    )
                },
                open(e, p) {
                    console.log(p);
                    this.$prompt('请输入新密码', '修改密码', {
                        showCancelButton: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',

                        beforeClose: (action, instance, done) => {
                            console.log(instance);
                            if (action === 'confirm') {
                                instance.confirmButtonLoading = true;
                                instance.confirmButtonText = '执行中...';
                                this.db.collection('operationUsers').where({ _openid: p._openid }).update({

                                    data: {

                                        "webPassword": instance.inputValue
                                    },
                                    success: res => {
                                        console.log(res);
                                        if (res.stats.updated) {
                                            setTimeout(() => {
                                                done();
                                                setTimeout(() => {
                                                    instance.confirmButtonLoading = false;
                                                }, 300);
                                            }, 1000);
                                        }
                                    },
                                    fail: res => {

                                        console.log(res);

                                    }
                                })

                            } else {
                                done();
                            }
                        }
                    }).then(({ value }) => {
                        this.$message({
                            type: 'success',
                            message: '重置密码成功'
                        });
                        this.db.collection("operationUsers").get().then(res => {
                            console.log(res);
                            // 我要的数据是res.data
                            this.usersInfo = res.data;
                        }
                        )
                    }).catch((error) => {
                        console.log(error);
                    });

                },
                write(e) {
                    if ((this.newPassword.length != 0) || (this.confirmPassword.length != 0)) {

                        return true
                    } else {
                        this.$message({
                            type: 'error',
                            message: '密码不能为空'
                        });
                        return false
                    }
                },
                inputEmail(e) {
                    let str = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;

                    if (str.test(this.Email) || str.test(this.email)) {

                        return true

                    } else {
                        this.$message({
                            type: 'error',
                            message: '请填写正确的邮箱号'
                        })
                        return false
                    }
                },
                empty() {
                    this.email = '';
                    this.newPassword = '';
                    this.confirmPassword = '';
                    this.Email = '';
                },
                save(e) {
                    this.timestamp = parseInt(new Date().getTime() / 1000) + '';
                    console.log(this.timestamp);
                    let str = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
                    if (this.Newpassword != 0 && this.confirmPassword != 0 && str.test(this.email) && str.test(this.email) && this.email != 0 && this.Email != 0) {
                        if (this.newPassword == this.confirmPassword && this.email == this.Email) {
                            this.db.collection('operationUsers').add({
                                data: {
                                    _openid: this.timestamp,
                                    webPassword: this.confirmPassword,
                                    email: this.email
                                },
                                success: res => {
                                    console.log(res);

                                    this.$message({
                                        type: 'success',
                                        message: '添加新管理员账号成功'
                                    })

                                },
                                fail: res => {
                                    console.log(res);
                                }
                            })
                        } else {
                            if (this.newPassword != this.confirmPassword) {
                                this.$message({
                                    type: 'error',
                                    message: '输入密码不一致'
                                })
                            }
                            if (this.email != this.Email) {
                                this.$message({
                                    type: 'error',
                                    message: '输入邮箱不一致'
                                })
                            }

                        }
                    } else {
                        this.$message({
                            type: 'error',
                            message: '请填写完整信息或者查看填写格式是否正确'
                        })
                    }

                }
            },


            watch: {
                keyWord: {
                    immediate: true,
                    handler(val) {
                        this.filusersInfo = this.usersInfo.filter((p) => {
                            // console.log(this.keyWord);
                            // console.log(p);
                            return ((p.realName ? (p.realName.indexOf(this.keyWord) !== -1) : null) || (p.email ? (p.email.indexOf(this.keyWord) !== -1) : null));


                        });
                    }

                }
            },
            // computed: {
            //     filusersInfo() {
            //         return this.usersInfo.filter((p) => {
            //             // console.log(this.keyWord);
            //             // console.log(p);
            //             return ((p.realName ? (p.realName.indexOf(this.keyWord) !== -1) : null) || (p._openid ? (p._openid.indexOf(this.keyWord) !== -1) : null));

            //         })
            //     }

            // },


            async created() {
                await this.initWx();
                //获取列表数据
                this.getMessage();
                console.log(this);
                this.filusersInfo = this.usersInfo;
            }
        })

    </script>
</body>

</html>